<html><!--根目录标签 html:超文本标记语言,由很多标签标记的这样一门语言-->
	<head><!--头部:不可视标签-->
		<!--网页三要素-->
		<title></title>
		<meta name="Author" content="李龙"><!--元标签,引入相关属性-->
		<meta charset="utf-8"><!--万国码-->
		<meta name="keywords" content=".凯迪开班典礼,作业,自我介绍"><!--关键词,seo优化-->
		<meta name="description" content="自我介绍,我是谁?(个人介绍)我为什么要来学习前端?(目的)我打算怎么学习前端?(决定你能走多远)"><!--页面描述-->
		<link rel="stylesheet" type="text/css" href="iconfont/iconfont.css">
		<style>

		/*样式重置*/
		body,ul,li,h3{margin:0;}
		
		ul{
			padding:0;
			list-style:none;
		}
		a{
			color:white;
			text-decoration:none;
		}
		/*内容区 start*/
		.content{
			position:relative;
			width:1226;
			height:460px;
			margin:100px auto;
		}	
		/*内容区 ending*/

		/*侧边导航栏 start*/
		.nav{
			position:absolute;/*为了不被banner背景覆盖掉*/
			width:234px;
			height:100%;
			z-index:1;
		}		
		.snave-content{
			width:100%;
			height:435px;
			background-color:rgba(0,0,0,0.6);/*带有透明的颜色rgba*/
			padding-top:25px;
		}
		.snave-content li>h3{
			position:relative;
			line-height:42px;
			padding-right:20px;
			padding-left:30px;
			font-size:14px;
			color:white;
		}
		/*侧边导航栏 ending*/

		/*二级菜单 start*/
		.second-nav{
			display:none;/*让二级菜单全部消失*/
			position:absolute;
			width:994px;
			height:460px;
			top:0;
			left:234px;
			background-color:white;
			box-shadow: rgba(0, 0, 0, 0.18) 0px 8px 16px;
		}
		.secnav-fourth{
			width:746px;
		}
		.secnav-fifth{
			width:498px;
		}
		.secnav-sixth{
			width:250px;
		}
		.secnav-seventh{
			width:746px;
		}
		.secnav-eighth{
			width:498px;
		}
		.secnav-nineth{
			width:250px;
		}
		.second-nav ul{ 
			float:left;
			width:197px;
			/*	height:460px;	*/
			margin-right:51px;
			background-color:white;
		}
		.second-nav .second-list>li{
			position:relative;/*给a标签的定位做标记*/
			height:70px;
			line-height:70px;/*必须要有文字在,line-height才会有效果*/
			background-color:white;
			margin-top:6px;
			text-align:center;
/* 			vertical-align:middle; */
		}
		.second-nav .second-list>li img{/*使图片居中的方法*/
			display:inline-block;
			vertical-align:middle;
		}
		.second-list li>a{/*广告图标对齐*/
			position:absolute;
			display:inline-block;
			left:20px;
			color:black;
		}
		/* 二级菜单 ending */

		/*二级菜单伪类选择器 start*/
		.snave-content li:nth-child(1):hover .secnav-first{
			display:block;
		}
		.snave-content li:nth-child(2):hover .secnav-second{
			display:block;
		}
		.snave-content li:nth-child(3):hover .secnav-third{
			display:block;
		}
		.snave-content li:nth-child(4):hover .secnav-fourth{
			display:block;
		}
		.snave-content li:nth-child(5):hover .secnav-fifth{
			display:block;
		}
		.snave-content li:nth-child(6):hover .secnav-sixth{
			display:block;
		}
		.snave-content li:nth-child(7):hover .secnav-seventh{
			display:block;
		}
		.snave-content li:nth-child(8):hover .secnav-eighth{
			display:block;
		}
		.snave-content li:nth-child(9):hover .secnav-nineth{
			display:block;
		}
		.snave-content li:nth-child(10):hover .secnav-tenth{
			display:block;
		}
		/*二级菜单伪类选择器 ending*/


		/*banner背景图片 start*/
		.bgcontent{
			position:absolute;
			width:100%;
			height:100%;
			top:0;
			left:0;
		}
		.bglist{
			width:100%;
			height:100%;		
		}
		.bglist li{
			position:absolute;
			width:100%;
			height:100%;
		}
		/* banner背景图片 ending*/
		
		/*字体图标 start*/
		i.iconfont{
			position:absolute;
			right:20px;
			color:#999;
		}
		/*字体图标 ending*/
		
		/*banner按钮 start*/
		.bubblelist{
			position:absolute;
			width:125px;
			height:10px;
			right:30px;
			bottom:10px;
		}
		.bottom-pager>li{
			float:left;
			width:10px;
			height:10px;
			margin-right:10px;
			border:2px solid #999;
			border-radius:50%;
			background-color:#717171;
		}
		.bottom-pager>li:hover{	/*选中变色*/
			background-color:white;
		}
		/*banner按钮 ending*/

		/*side的按钮 start*/
		.button{
			position:absolute;
			width:41px;
			height:69px;
			top:0;
			bottom:0;
			margin:auto;
			background-image:url("images/icon-slides.png");
			background-repeat:no-repeat;
		}
		.left-button{
			left:234px;
			background-position:-84px;
		}
		.right-button{
			right:0;
			background-position:-126px;
		}
		.left-button:hover{
			background-position:0;
		}
		.right-button:hover{
			background-position:-42px;
		}
		/*side按钮 ending*/
		</style>
	</head>
	<body><!--身体:可视化标签-->
	<div class="content">
		<div class="nav">
			
			<ul class="snave-content">
				<li><!--第一个导航框 start-->
					<h3>
					<a href="#">手机 电话卡</a>
					<i class="iconfont icon-right"></i>
					</h3><!-- 1导航标题 -->

					<!-- 01二级菜单  start -->
					<div class="second-nav secnav-first">
						<ul class="second-list first">
							<li>
								<a href="#">
								<img src="images/list1-1/1.png" alt="" width="40" height="40">
								小米8
								</a>
							</li>
							<li>
								<a href="#">
								<img src="images/list1-1/2.png" alt="" width="40" height="40">
								小米8 SE
								</a>
							</li>
							<li>	
								<a href="#">
								<img src="images/list1-1/3.png" alt="" width="40" height="40">
								小米MIX 2S
								</a>
							</li>
							<li>	
								<a href="#">
								<img src="images/list1-1/4.png" alt="" width="40" height="40">
								小米MAX3
								</a>
							</li>
							<li>	
								<a href="#">
								<img src="images/list1-1/5.jpg" alt="" width="40" height="40">
								小米6X
								</a>
							</li>
							<li>	
								<a href="#">
								<img src="images/list1-1/6.png" alt="" width="40" height="40">
								黑鲨游戏手机
								</a>
							</li>
						</ul>
						<ul class="second-list second">
							<li>
								<a href="#">
								<img src="images/list1-2/1.png" alt="" width="40" height="40">
								小米MIX 2
								</a>
							</li>
							<li>
								<a href="#">
								<img src="images/list1-2/2.jpg" alt="" width="40" height="40">
								小米Max 2
								</a>
							</li>
							<li>	
								<a href="#">
								<img src="images/list1-2/3.png" alt="" width="40" height="40">
								红米6 Pro
								</a>
							</li>
							<li>	
								<a href="#">
								<img src="images/list1-2/4.png" alt="" width="40" height="40">
								红米6
								</a>
							</li>
							<li>	
								<a href="#">
								<img src="images/list1-2/5.png" alt="" width="40" height="40">
								红米6A
								</a>
							</li>
							<li>	
								<a href="#">
								<img src="images/list1-2/6.png" alt="" width="40" height="40">
								红米Note 5
								</a>
							</li>
						</ul>
						<ul class="second-list third">
							<li>
								<a href="#">
								<img src="images/list1-3/1.png" alt="" width="40" height="40">
								红米S2
								</a>
							</li>
							<li>
								<a href="#">
								<img src="images/list1-3/2.png" alt="" width="40" height="40">
								红米5 Plus
								</a>
							</li>
							<li>	
								<a href="#">
								<img src="images/list1-3/3.jpg" alt="" width="40" height="40">
								移动4G+专区
								</a>
							</li>
							<li>	
								<a href="#">
								<img src="images/list1-3/4.jpg" alt="" width="40" height="40">
								对比手机
								</a>
							</li>
							<li>	
								<a href="#">
								<img src="images/list1-3/5.jpg" alt="" width="40" height="40">
								米粉卡 日租卡
								</a>
							</li>
							<li>	
								<a href="#">
								<img src="images/list1-3/6.jpg" alt="" width="40" height="40">
								小米移动 电话卡
								</a>
							</li>
						</ul>
						<ul class="second-list fourth">
							<li>
								<a href="#">
								<img src="images/list1-4/1.png" alt="" width="40" height="40">
								手机上门维修
								</a>
							</li>
						</ul>
					</div>
					<!-- 01二级菜单 end -->				

				</li>
				<li><!--第二个导航框 start-->
					<h3>
					<a href="#">电视 盒子</a>
					<i class="iconfont icon-right"></i>
					</h3><!-- 2导航标题 -->

					<!--02二级菜单 start-->
					<div class="second-nav secnav-second">
							<ul class="second-list first"><!-- 第一列 -->
								<li>
									<a href="#">
									<img src="images/list2-1/1.png" alt="" width="40" height="40">
									小米8
									</a>
								</li>
								<li>
									<a href="#">
									<img src="images/list2-1/2.png" alt="" width="40" height="40">
									小米8 SE
									</a>
								</li>
								<li>	
									<a href="#">
									<img src="images/list2-1/3.png" alt="" width="40" height="40">
									小米MIX 2S
									</a>
								</li>
								<li>	
									<a href="#">
									<img src="images/list2-1/4.png" alt="" width="40" height="40">
									小米MAX3
									</a>
								</li>
								<li>	
									<a href="#">
									<img src="images/list2-1/5.png" alt="" width="40" height="40">
									小米6X
									</a>
								</li>
								<li>	
									<a href="#">
									<img src="images/list2-1/6.png" alt="" width="40" height="40">
									黑鲨游戏手机
									</a>
								</li>
							</ul>
							<ul class="second-list second"><!-- 第二列 -->
								<li>
									<a href="#">
									<img src="images/list2-2/1.png" alt="" width="40" height="40">
									小米MIX 2
									</a>
								</li>
								<li>
									<a href="#">
									<img src="images/list2-2/2.png" alt="" width="40" height="40">
									小米Max 2
									</a>
								</li>
								<li>	
									<a href="#">
									<img src="images/list2-2/3.png" alt="" width="40" height="40">
									红米6 Pro
									</a>
								</li>
								<li>	
									<a href="#">
									<img src="images/list2-2/4.png" alt="" width="40" height="40">
									红米6
									</a>
								</li>
								<li>	
									<a href="#">
									<img src="images/list2-2/5.png" alt="" width="40" height="40">
									红米6A
									</a>
								</li>
								<li>	
									<a href="#">
									<img src="images/list2-2/6.png" alt="" width="40" height="40">
									红米Note 5
									</a>
								</li>
							</ul>
							<ul class="second-list third"><!-- 第三列 -->
								<li>
									<a href="#">
									<img src="images/list2-3/1.png" alt="" width="40" height="40">
									红米S2
									</a>
								</li>
								<li>
									<a href="#">
									<img src="images/list2-3/2.png" alt="" width="40" height="40">
									红米5 Plus
									</a>
								</li>
								<li>	
									<a href="#">
									<img src="images/list2-3/3.png" alt="" width="40" height="40">
									移动4G+专区
									</a>
								</li>
								<li>	
									<a href="#">
									<img src="images/list2-3/4.png" alt="" width="40" height="40">
									对比手机
									</a>
								</li>
								<li>	
									<a href="#">
									<img src="images/list2-3/5.png" alt="" width="40" height="40">
									米粉卡 日租卡
									</a>
								</li>
								<li>	
									<a href="#">
									<img src="images/list2-3/6.png" alt="" width="40" height="40">
									小米移动 电话卡
									</a>
								</li>
							</ul>
							<ul class="second-list fourth"><!-- 第四列 -->
								<li>
									<a href="#">
									<img src="images/list2-4/1.png" alt="" width="40" height="40">
									手机上门维修
									</a>
								</li>
								<li>
									<a href="#">
									<img src="images/list2-4/2.png" alt="" width="40" height="40">
									手机上门维修
									</a>
								</li>
								<li>
									<a href="#">
									<img src="images/list2-4/3.png" alt="" width="40" height="40">
									手机上门维修
									</a>
								</li>
								<li>
									<a href="#">
									<img src="images/list2-4/4.png" alt="" width="40" height="40">
									手机上门维修
									</a>
								</li>
								<li>
									<a href="#">
									<img src="images/list2-4/5.jpg" alt="" width="40" height="40">
									手机上门维修
									</a>
								</li>
							</ul>
					</div>
					<!-- 02二级菜单 end -->
					
				</li>
				<li><!--第三个导航框 start-->
					<h3>
					<a href="#">笔记本 平板</a>
					<i class="iconfont icon-right"></i>
					</h3><!-- 3导航标题 -->

					<!-- 03二级菜单 start -->
					<div class="second-nav secnav-third">
						<ul class="second-list first"><!-- 第一列 -->
							<li>
								<a href="#">
								<img src="images/list3-1/1.jpg" alt="" width="40" height="40">
								小米8
								</a>
							</li>
							<li>
								<a href="#">
								<img src="images/list3-1/2.jpg" alt="" width="40" height="40">
								小米8 SE
								</a>
							</li>
							<li>	
								<a href="#">
								<img src="images/list3-1/3.jpg" alt="" width="40" height="40">
								小米MIX 2S
								</a>
							</li>
							<li>	
								<a href="#">
								<img src="images/list3-1/4.png" alt="" width="40" height="40">
								小米MAX3
								</a>
							</li>
							<li>	
								<a href="#">
								<img src="images/list3-1/5.jpg" alt="" width="40" height="40">
								小米6X
								</a>
							</li>
							<li>	
								<a href="#">
								<img src="images/list3-1/6.png" alt="" width="40" height="40">
								黑鲨游戏手机
								</a>
							</li>
						</ul>
						<ul class="second-list second"><!-- 第二列 -->
							<li>
								<a href="#">
								<img src="images/list3-2/1.png" alt="" width="40" height="40">
								小米MIX 2
								</a>
							</li>
							<li>
								<a href="#">
								<img src="images/list3-2/2.jpg" alt="" width="40" height="40">
								小米Max 2
								</a>
							</li>
							<li>	
								<a href="#">
								<img src="images/list3-2/3.jpg" alt="" width="40" height="40">
								红米6 Pro
								</a>
							</li>
							<li>	
								<a href="#">
								<img src="images/list3-2/4.png" alt="" width="40" height="40">
								红米6
								</a>
							</li>
							<li>	
								<a href="#">
								<img src="images/list3-2/5.jpg" alt="" width="40" height="40">
								红米6A
								</a>
							</li>
							<li>	
								<a href="#">
								<img src="images/list3-2/6.jpg" alt="" width="40" height="40">
								红米Note 5
								</a>
							</li>
						</ul>
						<ul class="second-list third"><!-- 第三列 -->
							<li>
								<a href="#">
								<img src="images/list3-3/1.jpg" alt="" width="40" height="40">
								红米S2
								</a>
							</li>
							<li>
								<a href="#">
								<img src="images/list3-3/2.jpg" alt="" width="40" height="40">
								红米5 Plus
								</a>
							</li>
							<li>	
								<a href="#">
								<img src="images/list3-3/3.jpg" alt="" width="40" height="40">
								移动4G+专区
								</a>
							</li>
							<li>	
								<a href="#">
								<img src="images/list3-3/4.png" alt="" width="40" height="40">
								对比手机
								</a>
							</li>
							<li>	
								<a href="#">
								<img src="images/list3-3/5.jpg" alt="" width="40" height="40">
								米粉卡 日租卡
								</a>
							</li>
							<li>	
								<a href="#">
								<img src="images/list3-3/6.jpg" alt="" width="40" height="40">
								小米移动 电话卡
								</a>
							</li>
						</ul>
						<ul class="second-list fourth"><!-- 第四列 -->
							<li>
								<a href="#">
								<img src="images/list3-4/1.png" alt="" width="40" height="40">
								手机上门维修
								</a>
							</li>
							<li>
								<a href="#">
								<img src="images/list3-4/2.jpg" alt="" width="40" height="40">
								手机上门维修
								</a>
							</li>
							<li>
								<a href="#">
								<img src="images/list3-4/3.jpg" alt="" width="40" height="40">
								手机上门维修
								</a>
							</li>
							<li>
								<a href="#">
								<img src="images/list3-4/4.jpg" alt="" width="40" height="40">
								手机上门维修
								</a>
							</li>
							<li>
								<a href="#">
								<img src="images/list3-4/5.jpg" alt="" width="40" height="40">
								手机上门维修
								</a>
							</li>
						</ul>
					</div>
					<!-- 03二级菜单 end -->

				</li>
				<li><!--第四个导航框 start-->
					<h3>
					<a href="#">家电 插线板</a>
					<i class="iconfont icon-right"></i>
					</h3><!-- 4导航标题 -->

					<!-- 04二级菜单 start -->
					<div class="second-nav secnav-fourth">
						<ul class="second-list first"><!-- 第一列 -->
							<li>
								<a href="#">
								<img src="images/list4-1/1.png" alt="" width="40" height="40">
								小米8
								</a>
							</li>
							<li>
								<a href="#">
								<img src="images/list4-1/2.jpg" alt="" width="40" height="40">
								小米8 SE
								</a>
							</li>
							<li>	
								<a href="#">
								<img src="images/list4-1/3.png" alt="" width="40" height="40">
								小米MIX 2S
								</a>
							</li>
							<li>	
								<a href="#">
								<img src="images/list4-1/4.jpg" alt="" width="40" height="40">
								小米MAX3
								</a>
							</li>
							<li>	
								<a href="#">
								<img src="images/list4-1/5.jpg" alt="" width="40" height="40">
								小米6X
								</a>
							</li>
							<li>	
								<a href="#">
								<img src="images/list4-1/6.jpg" alt="" width="40" height="40">
								黑鲨游戏手机
								</a>
							</li>
						</ul>
						<ul class="second-list second"><!-- 第二列 -->
							<li>
								<a href="#">
								<img src="images/list4-2/1.jpg" alt="" width="40" height="40">
								小米MIX 2
								</a>
							</li>
							<li>
								<a href="#">
								<img src="images/list4-2/2.jpg" alt="" width="40" height="40">
								小米Max 2
								</a>
							</li>
							<li>	
								<a href="#">
								<img src="images/list4-2/3.jpg" alt="" width="40" height="40">
								红米6 Pro
								</a>
							</li>
							<li>	
								<a href="#">
								<img src="images/list4-2/4.jpg" alt="" width="40" height="40">
								红米6
								</a>
							</li>
							<li>	
								<a href="#">
								<img src="images/list4-2/5.jpg" alt="" width="40" height="40">
								红米6A
								</a>
							</li>
							<li>	
								<a href="#">
								<img src="images/list4-2/6.jpg" alt="" width="40" height="40">
								红米Note 5
								</a>
							</li>
						</ul>
						<ul class="second-list third"><!-- 第三列 -->
							<li>
								<a href="#">
								<img src="images/list4-3/1.png" alt="" width="40" height="40">
								红米S2
								</a>
							</li>
							<li>
								<a href="#">
								<img src="images/list4-3/2.jpg" alt="" width="40" height="40">
								红米5 Plus
								</a>
							</li>
							<li>	
								<a href="#">
								<img src="images/list4-3/3.jpg" alt="" width="40" height="40">
								移动4G+专区
								</a>
							</li>
							<li>	
								<a href="#">
								<img src="images/list4-3/4.jpg" alt="" width="40" height="40">
								对比手机
								</a>
							</li>
						</ul>
					</div>
					<!-- 04二级菜单 end -->

				</li>
				<li><!--第五个导航框 start-->
					<h3>
					<a href="#">出行 穿戴</a>
					<i class="iconfont icon-right"></i>
					</h3><!-- 5导航标题 -->

					<!-- 05二级菜单 start -->
					<div class="second-nav secnav-fifth">
						<ul class="second-list first"><!-- 第一列 -->
							<li>
								<a href="#">
								<img src="images/list5-1/1.jpg" alt="" width="40" height="40">
								小米8
								</a>
							</li>
							<li>
								<a href="#">
								<img src="images/list5-1/2.jpg" alt="" width="40" height="40">
								小米8 SE
								</a>
							</li>
							<li>	
								<a href="#">
								<img src="images/list5-1/3.jpg" alt="" width="40" height="40">
								小米MIX 2S
								</a>
							</li>
							<li>	
								<a href="#">
								<img src="images/list5-1/4.jpg" alt="" width="40" height="40">
								小米MAX3
								</a>
							</li>
							<li>	
								<a href="#">
								<img src="images/list5-1/5.jpg" alt="" width="40" height="40">
								小米6X
								</a>
							</li>
							<li>	
								<a href="#">
								<img src="images/list5-1/6.jpg" alt="" width="40" height="40">
								黑鲨游戏手机
								</a>
							</li>
						</ul>
						<ul class="second-list second"><!-- 第二列 -->
							<li>
								<a href="#">
								<img src="images/list5-2/1.jpg" alt="" width="40" height="40">
								小米MIX 2
								</a>
							</li>
							<li>
								<a href="#">
								<img src="images/list5-2/2.jpg" alt="" width="40" height="40">
								小米Max 2
								</a>
							</li>
							<li>	
								<a href="#">
								<img src="images/list5-2/3.jpg" alt="" width="40" height="40">
								红米6 Pro
								</a>
							</li>								
						</ul>
					</div>
					<!-- 05二级菜单 end -->

				</li>
				<li><!--第六个导航框 start-->
					<h3>
					<a href="#">智能 路由器</a>
					<i class="iconfont icon-right"></i>
					</h3><!-- 6导航标题 -->
					<!-- 06二级菜单 start -->
					<div class="second-nav secnav-sixth">
						<ul class="second-list first">
							<li>
								<a href="#">
								<img src="images/list6-1/1.jpg" alt="" width="40" height="40">
								小米8
								</a>
							</li>
							<li>
								<a href="#">
								<img src="images/list6-1/2.jpg" alt="" width="40" height="40">
								小米8 SE
								</a>
							</li>
							<li>	
								<a href="#">
								<img src="images/list6-1/3.jpg" alt="" width="40" height="40">
								小米MIX 2S
								</a>
							</li>
							<li>	
								<a href="#">
								<img src="images/list6-1/4.jpg" alt="" width="40" height="40">
								小米MAX3
								</a>
							</li>
							<li>	
								<a href="#">
								<img src="images/list6-1/5.jpg" alt="" width="40" height="40">
								小米6X
								</a>
							</li>
							<li>	
								<a href="#">
								<img src="images/list6-1/6.jpg" alt="" width="40" height="40">
								黑鲨游戏手机
								</a>
							</li>
						</ul>							
					</div>
					<!-- 06二级菜单 end -->

				</li>
				<li><!--第七个导航框 start-->
					<h3>
					<a href="#">电源 配件</a>
					<i class="iconfont icon-right"></i>
					</h3><!-- 7导航标题 -->

					<!-- 07二级菜单 start -->
					<div class="second-nav secnav-seventh">
						<ul class="second-list first"><!-- 第一列 -->
							<li>
								<a href="#">
								<img src="images/list7-1/1.jpg" alt="" width="40" height="40">
								小米8
								</a>
							</li>
							<li>
								<a href="#">
								<img src="images/list7-1/2.jpg" alt="" width="40" height="40">
								小米8 SE
								</a>
							</li>
							<li>	
								<a href="#">
								<img src="images/list7-1/3.jpg" alt="" width="40" height="40">
								小米MIX 2S
								</a>
							</li>
							<li>	
								<a href="#">
								<img src="images/list7-1/4.jpg" alt="" width="40" height="40">
								小米MAX3
								</a>
							</li>
							<li>	
								<a href="#">
								<img src="images/list7-1/5.jpg" alt="" width="40" height="40">
								小米6X
								</a>
							</li>
							<li>	
								<a href="#">
								<img src="images/list7-1/6.jpg" alt="" width="40" height="40">
								黑鲨游戏手机
								</a>
							</li>
						</ul>
						<ul class="second-list second"><!-- 第二列 -->
							<li>
								<a href="#">
								<img src="images/list7-2/1.jpg" alt="" width="40" height="40">
								小米MIX 2
								</a>
							</li>
							<li>
								<a href="#">
								<img src="images/list7-2/2.jpg" alt="" width="40" height="40">
								小米Max 2
								</a>
							</li>
							<li>	
								<a href="#">
								<img src="images/list7-2/3.jpg" alt="" width="40" height="40">
								红米6 Pro
								</a>
							</li>
							<li>	
								<a href="#">
								<img src="images/list7-2/4.jpg" alt="" width="40" height="40">
								红米6
								</a>
							</li>
							<li>	
								<a href="#">
								<img src="images/list7-2/5.jpg" alt="" width="40" height="40">
								红米6A
								</a>
							</li>
							<li>	
								<a href="#">
								<img src="images/list7-2/6.jpg" alt="" width="40" height="40">
								红米Note 5
								</a>
							</li>
						</ul>
						<ul class="second-list third"><!-- 第三列 -->
							<li>
								<a href="#">
								<img src="images/list7-3/1.jpg" alt="" width="40" height="40">
								小米MIX 2
								</a>
							</li>
							<li>
								<a href="#">
								<img src="images/list7-3/2.jpg" alt="" width="40" height="40">
								小米Max 2
								</a>
							</li>
						</ul>
					</div>
					<!-- 07二级菜单 end -->

				</li>
				<li><!--第八个导航框 start-->
					<h3>
					<a href="#">个护 儿童</a>
					<i class="iconfont icon-right"></i>
					</h3><!-- 8导航标题 -->

					<!-- 08二级菜单 start -->
					<div class="second-nav secnav-eighth">
						<ul class="second-list first"><!-- 第一列 -->
							<li>
								<a href="#">
								<img src="images/list8-1/1.jpg" alt="" width="40" height="40">
								小米8
								</a>
							</li>
							<li>
								<a href="#">
								<img src="images/list8-1/2.jpg" alt="" width="40" height="40">
								小米8 SE
								</a>
							</li>
							<li>	
								<a href="#">
								<img src="images/list8-1/3.jpg" alt="" width="40" height="40">
								小米MIX 2S
								</a>
							</li>
							<li>	
								<a href="#">
								<img src="images/list8-1/4.jpg" alt="" width="40" height="40">
								小米MAX3
								</a>
							</li>
							<li>	
								<a href="#">
								<img src="images/list8-1/5.jpg" alt="" width="40" height="40">
								小米6X
								</a>
							</li>
							<li>	
								<a href="#">
								<img src="images/list8-1/6.jpg" alt="" width="40" height="40">
								黑鲨游戏手机
								</a>
							</li>
						</ul>
						<ul class="second-list second"><!-- 第二行 -->
							<li>
								<a href="#">
								<img src="images/list8-2/1.jpg" alt="" width="40" height="40">
								小米MIX 2
								</a>
							</li>
							<li>
								<a href="#">
								<img src="images/list8-2/2.jpg" alt="" width="40" height="40">
								小米Max 2
								</a>
							</li>
							<li>	
								<a href="#">
								<img src="images/list8-2/3.jpg" alt="" width="40" height="40">
								红米6 Pro
								</a>
							</li>
							<li>	
								<a href="#">
								<img src="images/list8-2/4.jpg" alt="" width="40" height="40">
								红米6
								</a>
							</li>
							<li>	
								<a href="#">
								<img src="images/list8-2/5.jpg" alt="" width="40" height="40">
								红米6A
								</a>
							</li>
						</ul>
					</div>
					<!-- 08二级菜单 end -->					

				</li>
				<li><!--第九个导航框 start-->
					<h3>
					<a href="#">耳机 音响</a>
					<i class="iconfont icon-right"></i>
					</h3><!-- 9导航标题 -->

					<!-- 09二级菜单 start -->
					<div class="second-nav secnav-nineth">
						<ul class="second-list first">
							<li>
								<a href="#">
								<img src="images/list9-1/1.jpg" alt="" width="40" height="40">
								小米8
								</a>
							</li>
							<li>
								<a href="#">
								<img src="images/list9-1/2.jpg" alt="" width="40" height="40">
								小米8 SE
								</a>
							</li>
							<li>	
								<a href="#">
								<img src="images/list9-1/3.jpg" alt="" width="40" height="40">
								小米MIX 2S
								</a>
							</li>
							<li>	
								<a href="#">
								<img src="images/list9-1/4.jpg" alt="" width="40" height="40">
								小米MAX3
								</a>
							</li>
							<li>	
								<a href="#">
								<img src="images/list9-1/5.jpg" alt="" width="40" height="40">
								小米6X
								</a>
							</li>
							<li>	
								<a href="#">
								<img src="images/list9-1/6.jpg" alt="" width="40" height="40">
								黑鲨游戏手机
								</a>
							</li>
						</ul>
					</div>
					<!-- 09二级菜单 end -->

				</li>
				<li><!--第十个导航框 start-->
					<h3>
					<a href="#">生活 箱包</a>
					<i class="iconfont icon-right"></i>
					</h3><!-- 10导航标题 -->

					<!-- 10二级菜单 start -->
					<div class="second-nav secnav-tenth">
						<ul class="second-list first"><!-- 第一列 -->
							<li>
								<a href="#">
								<img src="images/list10-1/1.jpg" alt="" width="40" height="40">
								小米8
								</a>
							</li>
							<li>
								<a href="#">
								<img src="images/list10-1/2.jpg" alt="" width="40" height="40">
								小米8 SE
								</a>
							</li>
							<li>	
								<a href="#">
								<img src="images/list10-1/3.jpg" alt="" width="40" height="40">
								小米MIX 2S
								</a>
							</li>
							<li>	
								<a href="#">
								<img src="images/list10-1/4.jpg" alt="" width="40" height="40">
								小米MAX3
								</a>
							</li>
							<li>	
								<a href="#">
								<img src="images/list10-1/5.jpg" alt="" width="40" height="40">
								小米6X
								</a>
							</li>
							<li>	
								<a href="#">
								<img src="images/list10-1/6.jpg" alt="" width="40" height="40">
								黑鲨游戏手机
								</a>
							</li>
						</ul>
						<ul class="second-list second"><!-- 第二列 -->
							<li>
								<a href="#">
								<img src="images/list10-2/1.jpg" alt="" width="40" height="40">
								小米MIX 2
								</a>
							</li>
							<li>
								<a href="#">
								<img src="images/list10-2/2.jpg" alt="" width="40" height="40">
								小米Max 2
								</a>
							</li>
							<li>	
								<a href="#">
								<img src="images/list10-2/3.jpg" alt="" width="40" height="40">
								红米6 Pro
								</a>
							</li>
							<li>	
								<a href="#">
								<img src="images/list10-2/4.png" alt="" width="40" height="40">
								红米6
								</a>
							</li>
							<li>	
								<a href="#">
								<img src="images/list10-2/5.png" alt="" width="40" height="40">
								红米6A
								</a>
							</li>
							<li>	
								<a href="#">
								<img src="images/list10-2/6.png" alt="" width="40" height="40">
								红米Note 5
								</a>
							</li>
						</ul>
						<ul class="second-list third"><!-- 第三列 -->
							<li>
								<a href="#">
								<img src="images/list10-3/1.jpg" alt="" width="40" height="40">
								红米S2
								</a>
							</li>
							<li>
								<a href="#">
								<img src="images/list10-3/2.jpg" alt="" width="40" height="40">
								红米5 Plus
								</a>
							</li>
							<li>	
								<a href="#">
								<img src="images/list10-3/3.jpg" alt="" width="40" height="40">
								移动4G+专区
								</a>
							</li>
							<li>	
								<a href="#">
								<img src="images/list10-3/4.jpg" alt="" width="40" height="40">
								对比手机
								</a>
							</li>
							<li>	
								<a href="#">
								<img src="images/list10-3/5.jpg" alt="" width="40" height="40">
								米粉卡 日租卡
								</a>
							</li>
							<li>	
								<a href="#">
								<img src="images/list10-3/6.jpg" alt="" width="40" height="40">
								小米移动 电话卡
								</a>
							</li>
						</ul>
						<ul class="second-list fourth"><!-- 第四列 -->
							<li>
								<a href="#">
								<img src="images/list10-4/1.jpg" alt="" width="40" height="40">
								手机上门维修
								</a>
							</li>
							<li>
								<a href="#">
								<img src="images/list10-4/2.jpg" alt="" width="40" height="40">
								手机上门维修
								</a>
							</li>
							<li>
								<a href="#">
								<img src="images/list10-4/3.jpg" alt="" width="40" height="40">
								手机上门维修
								</a>
							</li>
							<li>
								<a href="#">
								<img src="images/list10-4/4.jpg" alt="" width="40" height="40">
								手机上门维修
								</a>
							</li>
							<li>
								<a href="#">
								<img src="images/list10-4/5.jpg" alt="" width="40" height="40">
								手机上门维修
								</a>
							</li>						
						</ul>
					</div>
					<!-- 10二级菜单 end -->

				</li>
			</ul>
		</div>
		<div class="banner">
			<div class="bgcontent">
				<ul class="bglist">	<!-- 图片列表区域 -->
					<li>	<!-- 背景图一 -->
					<img src="images/bg1.jpg" width="100%" height="100%" alt="小米轮播">
					</li>
					<li>	<!-- 背景图二 -->
					<img src="images/bg2.jpg" width="100%" height="100%" alt="小米轮播">
					</li>
					<li>	<!-- 背景图三 -->
					<img src="images/bg3.jpg" width="100%" height="100%" alt="小米轮播">
					</li>
					<li>	<!-- 背景图四 -->
					<img src="images/bg4.jpg" width="100%" height="100%" alt="小米轮播">
					</li>
					<li>	<!-- 背景图五 -->
					<img src="images/bg5.jpg" width="100%" height="100%" alt="小米轮播">
					</li>
				</ul>			
			</div>
			<div class="bubblelist">
				<ul class="bottom-pager">
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
			</div>
			<div class="button left-button"></div>
			<div class="button right-button"></div>
		</div>
	</div>
	</body>
</html>
